<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex-grow</title>
	<style type="text/css">
		.container {
      display: flex;
      width: 600px;
      height: 140px;
      align-items: center;
      background-color: #ddd;
    }
    .item {
      width: 200px;
      height: 120px;
      line-height: 120px;
      text-align: center;
      background-color: orange;
    }
    .item2 {
      background-color: green;
    }
    .item-flex-grow{
      flex-grow:1;
      background-color: 
    }
    .item-flex-grow3{
      flex-grow: 3;
    }
    .item350 {
      width: 350px;
    }
    .item-flex-shrink {
      flex-shrink: 1;
    }
    .item-flex-shrink4 {
      flex-shrink: 4;
    }
    .item-flex-shrink0 {
      flex-shrink: 0;
    }
    .container-basic {
      flex-basis: 400px；
    }
	</style>
</head>
<body>
  <h1>没有设置任何规则</h1>
  <div class="container">
    <span class="item">item1</span>
    <span class="item item2">item2</span>
  </div>
</div>
  <h1>item1设置了flex-grow为1</h1>
	<div class="container">
    <span class="item item-flex-grow">item1</span>
    <span class="item item2">item2</span>
  </div>
  <h1>item1设置了flex-grow为1，item2设置了flex-grow为3</h1>
	<div class="container">
    <span class="item item-flex-grow">item1</span>
    <span class="item item2 item-flex-grow3">item2</span>
  </div>
  <h1>item的宽度为350px，item1设置了flex-grow为1，item2设置了flex-grow为3</h1>
	<div class="container">
    <span class="item item350 item-flex-grow">item1</span>
    <span class="item item350 item2 item-flex-grow3">item2</span>
  </div>
  <h1>item的宽度为350px，item1设置了flex-shrink为1，item2设置了flex-shrink为4</h1>
	<div class="container">
    <span class="item item350 item-flex-shrink">item1</span>
    <span class="item item350 item2 item-flex-shrink4">item2</span>
  </div>
  <h1>item的宽度为350px，item1设置了flex-shrink为0，item2设置了flex-shrink为0</h1>
	<div class="container">
    <span class="item item350 item-flex-shrink0">item1</span>
    <span class="item item350 item2 item-flex-shrink0">item2</span>
  </div>
  
</body>
</html>





